<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>会员余额：￥<span id="span1">0</span>元</p>
		<input type="text" id="input1" placeholder="请输入充值金额" />
		<button id="btn1">充值</button>
		<script>
			//js的组成部分：ECMAScript(js的核心)+DOM(文档对象模型)+BOM(浏览器对象模型)
			var myName = 'Jack';
			let age = 18;
			let isBoy = true;
			let citys = ['上海','宝鸡','北京','商洛','富平'];
			let person ={
				name:'MaBaoGuo',
				age:69,
				haswude:true,
				kongFu:[
					'耗子尾汁',
					'偷袭',
					' 接化发',
					'年轻人不讲武德',
					'大意了没有闪',
				]
			}
			 function showValue(){
					 console.log(myName);
					 console.log(age);
					 console.log(isBoy);
					 console.log(citys);
					 console.log(person);
				 }
				showValue()
							//选择元素
							let btn = document.getElementById('btn1');
							let input = document.querySelector('#input1');
							let span = document.querySelector('#span1')
							//console.log(btn);
							//console.log(input);
							//点击按钮充值，充值，监听事件
							btn.onclick = function(){
								console.log(input.value);
								console.log(span.innerHTML);
								console.log(Number(span.innerHTML)+input.value*1);
								let finalNum = Number(span.innerHTML)+input.value*1;
								span.innerHTML = finalNum;
							}


		</script>
	</body>
	</html>
